/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" } } */

<template>
	<view>
		<view class="bg"></view>

		<view class="content relative z-index2">
			<view class="bar" :style="{ height: customBar + 'px' }"></view>
			<view>
				<u-navbar title="" leftIcon="arrow-left" bgColor="transparent" leftIconColor="#fff"
					@leftClick="leftClick" titleStyle="color:#fff"></u-navbar>
			</view>

			<view class="yqm-t">
				我的邀请码
			</view>

			<view class="t2">
				扫码注册即可完成绑定
			</view>

			<view class="cont-b">
				<image :src="codeImage" mode=""></image>

				<view class="t">
					扫描加入新君涛汽车检测
				</view>
				<view class="t1">
					<!-- 推荐码：<text>9818</text> -->
				</view>
			</view>

			<view class="btn" @click="saveImage">
				保存图片到相册
			</view>


		</view>

		<view class="canvas">
			<canvas type="2d" canvas-id="myCanvas" id="myCanvas" style="width: 580px; height: 746px"></canvas>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	import {
		roundRect
	} from '@/utils/globalCanvas.js';
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const codeImage = ref('')


	const getCode = async (item) => {
		const env_version = uni.getStorageSync('envVersion')
		const res = await $post('/user/user_qrcode', {
			env_version
		})

		codeImage.value = res.info

		getCanvasToImage('myCanvas')
	}

	const isInitShare = ref(false)

	let canvas1 = ''

	const saveImage = () => {
		if (!isInitShare.value) {
			getCanvasToImage('myCanvas', 'save')
		} else {
			onSaveImage()
		}
	}

	const getCanvasToImage = (myCanvas, type) => {
		uni.createSelectorQuery()
			.select('#' + myCanvas)
			.node(({
				node: canvas
			}) => {})
			.exec((res) => {
				const canvas = res[0].node;
				const ctx = canvas.getContext('2d');
				canvas.width = 580;
				canvas.height = 746;

				roundRect(ctx, 0, 0, 580, 746, 48);
				ctx.fillStyle = '#fff';
				ctx.fillRect(0, 0, 580, 746);

				const codeImage1 = canvas.createImage();
				codeImage1.src = codeImage.value;
				codeImage1.onload = () => {
					ctx.drawImage(codeImage1, 98, 132, 382, 382);
					ctx.restore();

					ctx.fillStyle = '#1D2129';
					// // 4.1 设置字体大小（两个参数必须都写）
					ctx.font = '400 32px PingFang SC, PingFang SC';
					ctx.fillText('扫描上方二维码，加入我们', 100, 620);

					setTimeout(function() {
						isInitShare.value = true;
						canvas1 = canvas;
						if (type == 'save') {
							onSaveImage(canvas)
						}
					}, 200);
				}

			})
	}

	const onSaveImage = (canvas) => {
		xaoi.checkSetting(canvas1, 'canvas')
	}

	Vue.onShow(() => {
		initPage()
	})
	Vue.onLoad(() => {
		getCode()
	})
</script>
<style scoped lang='scss'>
	.bg {
		width: 100%;
		height: 802rpx;
		background: #348B8A;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.yqm-t {
		font-family: OPPOSans, OPPOSans;
		font-weight: bold;
		font-size: 46rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
		margin-top: 82rpx;
	}

	.t2 {
		font-family: OPPOSans, OPPOSans;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
		margin-top: 12rpx;
	}

	.cont-b {
		width: 580rpx;
		height: 746rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx 8rpx rgba(70, 83, 99, 0.08);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		padding-top: 132rpx;
		margin: 86rpx auto 0;
		text-align: center;

		image {
			width: 384rpx;
			height: 382rpx;
			margin: 0 auto;
		}

		.t {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 48rpx;
			text-align: center;
			margin-top: 76rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.btn {
		width: 506rpx;
		height: 88rpx;
		border-radius: 76rpx 76rpx 76rpx 76rpx;
		border: 2rpx solid #348B8A;
		margin: 68rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #348B8A;
		line-height: 84rpx;
		text-align: center;
	}

	.canvas {
		width: 580rpx;
		height: 746rpx;
		position: fixed;
		top: -10000rpx;
		left: 0;
		z-index: 100;
	}
</style>